<!--菜单5：
监测支路一览-->
<template>
    <div class="MonitoringBranch_container">
        <el-row :gutter="0" class="MonitoringBranch_container1">
            <LayoutLeft title="汝阳县人民医院能耗数据一览表">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    height="100%"
                    :default-sort="{prop: 'date', order: 'descending'}"
                >
                    <el-table-column
                        prop="Instrument_code"
                        label="仪表编码"
                        sortable
                        width="165">
                    </el-table-column>
                    <el-table-column
                        prop="Instrument_name"
                        label="仪表名称"
                        sortable
                        width="165">
                    </el-table-column>
                    <el-table-column
                        prop="Initial_indication"
                        label="起始示数"
                        sortable
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="Termination_indicator"
                        label="终止示数"
                        sortable
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="Energy_consumption"
                        label="能耗量"
                        sortable
                        width="140">
                    </el-table-column>
                    <el-table-column
                        prop="Instrument_type"
                        label="仪表类型"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="Data_time"
                        label="数据时间"
                        sortable>
                    </el-table-column>
                </el-table>
            </LayoutLeft>
            <LayoutRight title="仪表能耗">
                <div class="MonitoringBranch_right_content">
                    <div class="MonitoringBranch_calender">
                        <div class="block">
                            <span class="demonstration">&nbsp;&nbsp;&nbsp;年:&nbsp;&nbsp;&nbsp;</span>
                            <el-date-picker
                                v-model="value3"
                                type="year"
                                placeholder="选择年（选择年份导出）">
                            </el-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">&nbsp;&nbsp;&nbsp;月:&nbsp;&nbsp;&nbsp;</span>
                            <el-date-picker
                                v-model="value2"
                                type="month"
                                placeholder="选择月（选择月份导出）">
                            </el-date-picker>
                        </div>
                        <div class="block">
                            <span class="demonstration">&nbsp;&nbsp;&nbsp;日:&nbsp;&nbsp;&nbsp;</span>
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日（选择指定天导出）">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="MonitoringBranch_Button">
                        <el-button type="primary" round>导出Excel</el-button>
                    </div>
                </div>
            </LayoutRight>
        </el-row>
    </div>
</template>
<script>
import LayoutRight from "@/components/Layout/LayoutRight";
import LayoutLeft from "@/components/Layout/LayoutLeft";
export default {
    components: {LayoutLeft, LayoutRight},
    data() {
        return {
            value1: '',
            value2: '',
            value3: '',
            tableData: []
        };
    },
    mounted() {
        this.MonitoringBranchData();
    },
    methods: {
        MonitoringBranchData() {
            this.axios.get('/api/module5/MonitoringBranchData').then(resp => {
                this.tableData = resp.data.list;
            })
        }
    }
};
</script>
<style scoped>
.MonitoringBranch_right_content {
    padding: 0.5em;
}

.MonitoringBranch_container,.MonitoringBranch_container1{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.MonitoringBranch_Button {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.available {
    width: 30px;
}

.el-table {
    height: 100%;
    border-width: 0 !important;
}

.el-month-table tr td {
    width: 30px;
}

.el-picker-panel__body {
    width: 240px;
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100% !important;
}
</style>
